import './index.scss'
import { microCreateMinis } from '../../minis'
import draggable from 'vuedraggable'
export default {
  name: 'micro-notice-box',
  mixins: [microCreateMinis],
  props: {},
  data() {
    return {
      tabActive: '0',
      formData: {
        iconType: '1',
        scrollType: '1',
        marginTop: '15',
        marginBottom: '15',
        bg_color: '#FFFFFF',
        textColor: '#464646',
        noticeList: []
      },
      isGetChooseFeature: false, // 是否可以返回微页面
      dialogChoosePages: false, // 微页面弹窗
      checkedLinkIndex: 0,
      noticeCheck: 0,
      activeIcon: 0,
      iconArr: ['el-icon-notice','el-icon-bell','el-icon-truck'],
      canChooseImagesNum: 1, // 可以添加的图片数量
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun'// 我自己的验证规则函数  比如弹窗之类的
    }
  },
  watch: {
    formData: {
      deep: true,
      handler(val) {
        if(val.iconType === '1' || val.iconType === '2'){
          val.noticeList.forEach(element => {
            element.linkObj.customImg = ''
          });
        }
      }
    }
  },
  components: {
    chooseFeature: () => import('@/components/choose-feature/index.vue'),
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    draggable
  },
  computed: {
    scrollType() {
      return this.formData.scrollType == '1'? 'vertical':'horizontal';
    }
  },
  mounted() {
  },
  methods: {
    getPicsUrl(arr) {
      this.formData.noticeList[this.checkedLinkIndex].linkObj.customImg = arr[0]
    },
    chooseImagesEnd($item) {
    },
    changeImg(index) {
      this.checkedLinkIndex = index
      this.$refs.pics.dialog = true
    },
    // 重置颜色
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.textColor = '#464646'
      } else if (type === 2) {
        this.formData.bg_color = '#FFFFFF'
      }
    },
    addNotice() {
      let id = new Date().getTime();
      this.formData.noticeList.push({
        id: id,
        content: '',
        linkObj: {
          id: '',
          type: '',
          microType: '',
          microTitle: '',
          // linkUrl: '',
          customImg:''
        },
        checkedIcon: 'el-icon-notice'
      })
    },
    checkedIcon(iconText,index) {
      this.formData.noticeList[index].checkedIcon = iconText;
    },
    deleteNotice(index) {
      this.formData.noticeList.splice(index,1);
    },
    checkedLink(index) {
      this.checkedLinkIndex = index;
      this.dialogChoosePages = true
    },
    // 选择微页面回调
    chooseChooseFeaturesFun($event) {
      const microTitle = $event.data.type === 0 && '系统页面' || $event.data.type === 1 && '功能页面' || $event.data.type === 2 && '商品详情'
      if ($event.data.type === 0) {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.path,
          microTitle: microTitle
        })
      } else {
        this.setLinkInfo({
          id: $event.data.id,
          type: $event.data.type,
          title: $event.data.title,
          link: $event.data.id,
          microTitle: microTitle
        })
      }
      this.dialogChoosePages = false
    },
     /** 设置跳转信息*/
     setLinkInfo(obj) {
       Object.assign(this.formData.noticeList[this.checkedLinkIndex].linkObj, obj);
       console.log(this.formData.noticeList,'11111111')
    },
     /**
     * 开始验证
     * */
    checkData() {
      this.myCheckResult(this.formData.noticeList.length !== 0)
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
      if (this.formData.noticeList.length == 0) {
        this.$message.error('请添加公告内容')
      }
    }
  }
}
